<!--  -->
<template>
  <div class="time_table">
    <div class="left">
      <span>合作商：</span>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
      <span class="demonstration">日期：</span>
      <el-date-picker
        v-model="value1"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <el-button type="primary" icon="el-icon-search" @click="searchFn">搜索</el-button>
    </div>
    <div v-if="!!numfn && numfn.length != 0" class="text">
      <span class="title">笔数统计：<span class="str">{{ numfn[0] }}</span>个</span>
      <span class="title">收入统计：<span class="str">{{ numfn[1] / 100 }}</span>个</span>
      <span class="title">分成统计：<span class="str">{{ numfn[2] / 100 }}</span>个</span>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="date"
        label="订单日期"
        width="180"
      />
      <el-table-column
        prop="ownerName"
        label="合作商"
        width="180"
      />
      <el-table-column
        prop="ratio"
        label="分成比例"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.ratio }}%</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderTotalMoney"
        label="收入"
      >
        <template slot-scope="scope">
          <span>+{{ scope.row.orderTotalMoney / 100 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderCount"
        label="笔数"
      />
      <el-table-column
        prop="totalBill"
        label="分成金额(元)"
      >
        <template slot-scope="scope">
          <span>+{{ scope.row.totalBill / 100 }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// 导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import dayjs from '@/utils/dayjs'
import { PartnerSearchAPI, partnerCollectAPI } from '@/api/reconciliation'
export default {
  name: 'TimeTable',
  components: { },
  props: {
    numfn:
      { type: Array,
        default: () => { [] }
      }
  },
  data() {
    return {
      options: null,
      value: '',
      value1: ['2022-10-01', dayjs().endOf('day').format('YYYY-MM-DD')],
      tableData: []
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.PartnerSearch()
    this.searchFn({
      partnerName: '',
      start: this.value1[0],
      end: this.value1[1],
      pageIndex: 1,
      pageSize: 10
    })
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    async PartnerSearch() {
      const { data } = await PartnerSearchAPI({
        pageIndex: 1,
        pageSize: 10000,
        name: null
      })
      this.options = data.currentPageRecords
    },
    async searchFn() {
      // console.log(this.value1)
      const { data } = await partnerCollectAPI({
        partnerName: this.value,
        start: this.value1[0],
        end: this.value1[1],
        pageIndex: 1,
        pageSize: 10
      })
      this.tableData = data.currentPageRecords
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang='scss'>
.left{
    margin-top: 20px;
}
.text{
    margin-top: 20px;
}
.str{
    font-size: 30px;
    color: #e42f25;
}
.title{
    margin-right: 80px;
}
</style>
